<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例联习</title>
	</head>
	<body>
		<div id="app">
			<div >
			姓名:	<input type="text" v-model="addUser.name"/>
			年龄:	<input type="text" v-model="addUser.age"/>
			<br />
			性别:	<input type="text" v-model="addUser.sex"/>
			<button @click="postUser">增加</button>
			</div>
			<div>
				<table align="center" border="1px" width="80%">
					<tr>
						<th colspan="5"align="center">
							<h3>用户列表</h3>
						</th>
					</tr>
					<tr align="center">
						<th>编号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>操作</th>
					</tr>
					<tr align="center" v-for="user in userList">
						<th v-text="user.id"></th>
						<th v-text="user.name"></th>
						<th v-text="user.age"></th>
						<th v-text="user.sex"></th>
						<th width="20%">
							<button @click="updateUserBt(user)">修改</button>
							<button @click="deleteUser(user)">删除</button>
						</th>
					</tr>
				</table>
			</div>
			
			<div align="center">
			编号:<input type="text" v-model="updateUser.id"disabled/>	
			姓名:<input type="text" v-model="updateUser.name"/>
			<br />
			年龄:<input type="text" v-model="updateUser.age"/>
			性别:<input type="text" v-model="updateUser.sex"/>
			<br />
			<button @click="updateUserMg">提交修改</button>
			</div>
		</div>
		
		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
		<script>
		axios.defaults.baseURL="http://localhost:8090/vue"
		const app=new Vue({
			el:"#app",
			data:{
				userList:[],
				addUser:{
					id:'',
					name:'',
					age:'',
					sex:''
				},
				updateUser:{
					id:'',
					name:'',
					age:'',
					sex:''
				}
			},
			methods:{
				getUserList(){
					axios.get("/findall").then(Promise=>{
						this.userList=Promise.data
					})
				},
				deleteUser(user){
					axios.delete("deleteUserById?id="+user.id).then(Promise=>{
						alert(Promise.data)
						this.getUserList()
					})
				},
				postUser(){
					axios.post("/saveUser",this.addUser).then(Promise=>{
						alert(Promise.data)
						this.getUserList()
						this.addUser={}
					})
				},
				updateUserBt(user){
					this.updateUser=user
					
				},
				updateUserMg(){
					axios.put("/updateuser",this.updateUser).then(Promise=>{
						alert(Promise.data)
						this.getUserList()
						this.updateUser={}
					})
				}
				
				
			},
			created(){
				this.getUserList()
			}
		})
 		</script>
	</body>
</html>

